<template>
	<view class="editHouse">
		<view class="title">房屋信息</view>
		<u-cell-group>
			<u-cell :title="area+house+' '+home">
			</u-cell>
		</u-cell-group>
		<view class="title">业主信息</view>
		<u--form labelPosition="left" ref="form" :model="model" :rules="rules">
			<u-form-item label="姓名" borderBottom ref="item1" prop="name">
				<u--input border="none" placeholder="请填写您的真实姓名" v-model="model.name"></u--input>
			</u-form-item>
			<u-form-item label="性别" ref="item2" prop="gender">
				<u-radio-group v-model="model.gender">
					<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="手机号" labelWidth="80" borderBottom prop="mobile">
				<u--input v-model="model.mobile" border="none" placeholder="请填写您的手机号"></u--input>
				<u-count-down ref="countDown" :time="6 * 1000" format="ss s" :autoStart="false">后可重新发送</u-count-down>
				<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled">
					获取验证码
				</u-button>
			</u-form-item>
			<u-form-item label="验证码" labelWidth="80" borderBottom>
				<u--input v-model="model.code" border="none" placeholder="请输入手机验证码"></u--input>
			</u-form-item>
			<u-form-item>
				<view class="u-demo-block__content">
					<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1">
						<image src="../../static/icon/add.png" mode="widthFix" style="width: 100rpx;">
						</image>
						<text>上传人像面照片</text>
					</u-upload>
				</view>
			</u-form-item>
			<u-form-item>
				<view class="u-demo-block__content">
					<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1">
						<image src="../../static/icon/add.png" mode="widthFix" style="width: 100rpx;">
						</image>
						<text>上传国徽面照片</text>
					</u-upload>
				</view>
			</u-form-item>
		</u--form>
		<life-button icon="../../static/icon/check.png">提交审核</life-button>
	</view>
</template>

<script>
	import {
		sendCode
	} from '../../api/login.js'
	export default {
		data() {
			return {
				area: '',
				house: '',
				home: '',
				model: {
					code: '',
					name: '',
					gender: '',
					mobile: '',
					idcardFrontUrl: '',
					idcardBackUrl: ''
				},
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					gender: {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur']
					},
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号格式不正确',
							trigger: ['change', 'blur']
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur']
						},
						{
							pattern: /^\d{6}$/,
							message: '验证码格式不正确',
							trigger: ['change', 'blur']
						}
					]
				}
			}

		},
		computed: {},
		methods: {
			async getCode() {
				const res = await sendCode(this.model.mobile)
				this.$refs.countDown.start();
			},
		},
		onLoad(options) {
			console.log(options)
			this.area = options.name,
				this.house = options.house,
				this.home = options.home
		}
	}
</script>

<style lang="scss" scoped>
	.editHouse {
		padding-bottom: 212rpx;
	}

	.title {
		height: 102rpx;
		line-height: 102rpx;
		padding: 0 30rpx;
	}

	.editHouse {
		width: 100%;
		height: 100vh;
		background-color: #fafafa;

		::v-deep .u-cell-group {
			background-color: #fff;
		}

		::v-deep .u-form {
			padding: 0 30rpx;
			background-color: #fff;
		}

		.u-demo-block__content {
			width: 100%;
			height: 250rpx;

			::v-deep .data-v-69e2a36e {
				width: 100%;
				height: 250rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center
			}
		}
	}
</style>
